VUE中$refs的基本用法

2024-06-02 03:12| 来源: 网络整理| 查看: 265

ref 有三种用法：

　　1、ref 加在普通的元素上，用this.$refs.（ref值）获取到的是dom元素

　　2、ref 加在子组件上，用this.$refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（）就可以使用了。

　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

应注意的坑：

1、如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ; 这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String））

2、通过 :ref =某变量添加ref（即加了:号） ,如果想获取该ref时需要加 [0]，如this.$refs[refsArrayItem] [0]；如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加，如this.$refs[refsArrayItem]。

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组，此时要拿到单个的ref 只需要循环就可以了。

例子1: 添加ref属性这是H1 获取H1元素获取注册过 ref 的所有组件或元素 methods: { getref() { // 表示从 $refs对象中, 获取 ref 属性值为: h1ele DOM元素或组件 console.log(this.$refs.h1Ele.innerText); this.$refs.h1ele.style.color = 'red';// 修改html样式 console.log(this.$refs.ho.msg);// 获取组件数据 console.log(this.$refs.ho.test);// 获取组件的方法 } } 例子2:

Vue代码：



JS代码：

//点击清空条件，调用该方法 emptyAndSearch(){//清空条件方法 //清空树选中状态 this.clearTreeNodeCheck(['tree']); //清除排序 this.$refs.multipleSelection.clearSort(); //设置分页参数 this.queryParam = { startRow : 1, pageSize : 20, condition:{ } } //分页查询调用 this.confirmSearch('statistics'); //设置清空条件为false this.$store.commit('valueDryGoodDatas/SET_CLEAR_ALL',false); } 例子3:

Vue代码：

JS代码：

//获取元素清除验证 this.$refs.goodPicInfoFormpicUrl.clearValidate()

一般来讲，想获取INPUT框，首先在获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了

【本文地址】

公司简介

联系我们